<template>
  <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      width="25%"
      :show-close="false"
      :modal-append-to-body="false"
      @close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input
            :type="flagType"
            placeholder="请输入旧密码"
            v-model="ruleForm.oldPwd">
          <i slot="suffix"
             :class="[this.flag?'iconfont icon-icon-test':'iconfont icon-icon-test1']"
             style="margin-top: 8px;font-size: 18px;"
             @click="getFlag()"/>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input
            :type="flagTypeNew"
            placeholder="请输入新密码"
            v-model="ruleForm.newPwd">
          <i slot="suffix"
             :class="[this.flagNew?'iconfont icon-icon-test':'iconfont icon-icon-test1']"
             style="margin-top: 8px;font-size: 18px;"
             @click="getFlagNew()"/>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="againPwd">
        <el-input
            :type="flagTypeAgain"
            placeholder="再次确认密码"
            v-model="ruleForm.againPwd">
          <i slot="suffix"
             :class="[this.flagAgain?'iconfont icon-icon-test':'iconfont icon-icon-test1']"
             style="margin-top: 8px;font-size: 18px;"
             @click="getFlagAgain()"/>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>



<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import {Form} from "element-ui";

@Component({name: 'EditPwd'})
export default class index extends Vue {
  private dialogFormVisible = false
  private flag = false
  private flagNew = false
  private flagAgain = false
  private flagType = 'password'
  private flagTypeNew = 'password'
  private flagTypeAgain = 'password'

  ruleForm = {
    oldPwd: '',
    newPwd: '',
    againPwd: '',
  } as {
    oldPwd: string,
    newPwd: string,
    againPwd: string
  }

  rules = {
    oldPwd: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入'))
          } else if ((!/^[0-9A-Za-z]{6,20}$/.test(value))) {
            callback(new Error('6 - 20位密码，数字或字母，区分大小写'))
          } else {
            callback();
          }
        }
      }
    ],
    newPwd: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入'))
          } else if ((!/^[0-9A-Za-z]{6,20}$/.test(value))) {
            callback(new Error('6 - 20位密码，数字或字母，区分大小写'))
          } else if (value !== this.ruleForm.oldPwd) {
            callback(new Error('密码不能修改与旧密码一致'))
          } else {
            callback();
          }
        }
      }
    ],
    againPwd: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入'))
          } else if ((!/^[0-9A-Za-z]{6,20}$/.test(value))) {
            callback(new Error('6 - 20位密码，数字或字母，区分大小写'))
          } else {
            callback();
          }
        }
      }
    ],
  }

  handleClose() {
    this.dialogFormVisible = false;
    this.flag = false;
    this.flagNew = false;
    this.flagAgain = false;
    const form = this.$refs.ruleForm as Form;
    form.clearValidate();

    this.ruleForm = {
      oldPwd: '',
      newPwd: '',
      againPwd: '',
    };
    this.$emit('closed');
  }

  getFlag() {
    this.flag = !this.flag
    this.flagType = this.flag ? 'text' : 'password'
  }

  getFlagNew() {
    this.flagNew = !this.flagNew
    this.flagTypeNew = this.flagNew ? 'text' : 'password'
  }

  getFlagAgain() {
    this.flagAgain = !this.flagAgain
    this.flagTypeAgain = this.flagAgain ? 'text' : 'password'
  }
}
</script>


<style scoped lang="scss">

</style>
